<template>
  <div class="base-frame-set">

    <!-- 主要部分 -->
    <main class="base-main">
      <!-- 两个导航栏 -->
      <BaseNav />
      <BaseNavPhone />
      <!-- 两个导航栏 -->
      <div class="base-continer-box">
        <div class="base-container">
          <!-- 头部 -->
          <BaseHeader />
          <!-- 头部 -->
          <div class="page-title">
            <template v-for="(item, index) of breadcrumbArr">
              <router-link class="breadcrumb-content" tag="span" :key="index + 'link'" :to="{name: item.name}">
                {{item.title}}
              </router-link>
              <span class="breadcrumb-att" :key="index + 'span'"> / </span>
            </template>
          </div>

          <!-- 空位插槽  -->
          <slot name="page-att" />
          <!-- 空位插槽 -->


          <!-- 路由切换动画 -->
          <transition name="base-route">
            <keep-alive include="HandPick">
              <router-view>
              </router-view>
            </keep-alive>
          </transition>

          <!-- 路由切换动画 -->

        </div>
        <BaseFooter />
      </div>
    </main>

  </div>
</template>

<script>
  import BaseHeader from '__COMPONENTS__/base_header/BaseHeader.vue'
  import BaseFooter from '__COMPONENTS__/base_footer/BaseFooter.vue'
  import BaseNav from '__COMPONENTS__/base_nav/BaseNav.vue'
  import BaseNavPhone from '__COMPONENTS__/base_nav_phone/BaseNavPhone.vue'
  export default {
    name: 'BaseFrameSet',
    components: {
      BaseHeader,
      BaseNav,
      BaseNavPhone,
      BaseFooter
    },
    computed: {
      breadcrumbArr() {
        return this.$route.matched.map((item) => {
          return {
            title: item.meta.title,
            name: item.name
          }
        })
      }
    }
  }
</script>

<style lang="less">
  @import url('./base_frame_set.less');
</style>